<template>
        <div class="w-100">
           <div class="row center_nav container">
                <div class="col-xs-4 navleft"><img @click="$router.go(-1)" src="../../static/images/icon_left_return.png" /></div>
                <div class="col-xs-8">点餐订单</div>
            </div>
            <div class="main">
                 <div class="tab-orders bd-t10 clearfix">
                     <ul>
                         <li @click="all" :class='[styles]'>全部</li>
                         <li @click="waitpay" :class='[styleswait]'>待付款</li>
                         <li @click="arrivepay" :class='[stylesarrive]'>已送达</li>
                         <li @click="completepay" :class='[stylescomplete]'>已完成</li>
                     </ul>
                 </div>
                 <!--全部页面-->
                <div v-if="all_all">
                     <div class="order-list">
                        <div class="row list-title">
                            <div class="col-xs-6 ellipsis">美地星球</div>
                            <div class="col-xs-6 ellipsis text-rg">已送达 取餐码：1234</div>
                        </div>
                        <div class="row list-item">
                            <div class="col-xs-10 ellipsis">照烧煎鸡腿饭套餐</div>
                            <div class="col-xs-2 text-rg">*1</div>
                            <div class="col-xs-12 ellipsis">
                                <span class="pull-right">共1件商品，实付¥15.5</span>
                                2017-11-23
                            </div>
                        </div>
                    </div>
                    <div class="order-list">
                        <div class="row list-title">
                            <div class="col-xs-6 ellipsis">美地星球</div>
                            <div class="col-xs-6 ellipsis text-rg">已送达 取餐码：1234</div>
                        </div>
                        <div class="row list-item">
                            <div class="col-xs-10 ellipsis">照烧煎鸡腿饭套餐</div>
                            <div class="col-xs-2 text-rg">*1</div>
                            <div class="col-xs-12 ellipsis">
                                <span class="pull-right">共1件商品，实付¥15.5</span>
                                2017-11-22
                            </div>
                        </div>
                    </div>
                    <div class="order-list">
                        <div class="row list-title">
                            <div class="col-xs-6 ellipsis">美地星球</div>
                            <div class="col-xs-6 ellipsis text-rg">已送达 取餐码：1234</div>
                        </div>
                        <div class="row list-item">
                            <div class="col-xs-10 ellipsis">照烧煎鸡腿饭套餐</div>
                            <div class="col-xs-2 text-rg">*1</div>
                            <div class="col-xs-12 ellipsis">
                                <span class="pull-right">共1件商品，实付¥15.5</span>
                                2017-11-22
                            </div>
                        </div>
                    </div>
                </div>
                <!--待付款页面-->
                <div v-if="all_wait">
                    待付款页面
                </div>
                <!--已送达-->
                <div v-if="all_arrive">
                    已送达页面
                </div>
                 <!--已完成-->
                <div v-if="all_component">
                    已完成页面
                </div>
            </div>

          
        </div>
</template>


<script>
    export default{
        name: 'Orders',
        data () {
            return {
                styles:'active',
                styleswait:'activechange',
                stylesarrive:'activechange',
                stylescomplete:'activechange',
                all_all:true,
                all_wait:false,
                all_arrive:false,
                all_component:false
            }
        },
        methods:{
            all:function(){
               this.styles='active'
               this.styleswait='activechange'
               this.stylesarrive='activechange'
               this.stylescomplete='activechange'
               this.all_all=true;
               this.all_wait=false;
               this.all_arrive=false;
               this.all_component=false;
            },
            waitpay:function(){
               this.styleswait='active'
               this.styles='activechange'
               this.stylesarrive='activechange'
               this.stylescomplete='activechange'
               this.all_all=false;
               this.all_wait=true;
               this.all_arrive=false;
               this.all_component=false;
            },
            arrivepay:function(){
               this.stylesarrive='active'
               this.styleswait='activechange'
               this.stylescomplete='activechange'
               this.styles='activechange'
               this.all_all=false;
               this.all_wait=false;
               this.all_arrive=true;
               this.all_component=false;
            },
            completepay:function(){
               this.stylescomplete='active'
               this.styleswait='activechange'
               this.styles='activechange'
               this.stylesarrive='activechange'
               this.all_all=false;
               this.all_wait=false;
               this.all_arrive=false;
               this.all_component=true;
            }
        }
    }
</script>

<style scoped>
.container{
    background-color: #fff;
    padding: 0px 3vw;
  }
  .navleft{
    padding:0px;
  }
  .navleft img{
    width: 6.8vw;
  }
.center_nav{
  /*height: 7.5vh;*/
  line-height:  7.5vh;
  background-color: #fff;
  color: #333333;
  font-size: 18px;
}

.main{ width: 100%;}
.bd-t10{border-top: 10px solid #eee;}

.tab-orders{ width: 100%; border-bottom:5px solid #eee; padding: 0 15px}
.tab-orders li{ width: 25%; text-align: center; position: relative; float: left; height: 44px; line-height: 44px;}
/*.tab-orders li:after{content: ''; display: black; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background: #faa934; 
                     transition: all ease .25s}*/
.active{ color: #faa934;border-bottom: 2px solid #faa934};
.activechange{color:#333;border-bottom:none}
.tab-orders li.active:after{ width: 100%;}
.order-list{ border-bottom:5px solid #eee;}
.list-title{ padding: 0 15px; line-height: 44px; height: 44px;}
.list-item{ padding: 8px 15px;  border-top: 1px solid #eee; line-height: 36px; }
.text-rg{ text-align: right}

</style>
